  <!-- 
  使用方法：
    title：操作提示，默认为操作成功
    msg：详细信息说明
    src：提示图片的地址
  例：
    <qm-operateTips
    title="警告提示"
    msg="内容详情可折行，建议不超过两行建议不超过两行建议不超过两行"
    :src="require('/src/libs/ui/img/blankpage/error.png')">
    </qm-operateTips>
   -->


<template id="qm-operateTips">
  <div>
    <div class="tips">
      <div class="tipsimg">
        <img :src="src" alt="" class="tipsimg" />
      </div>
      <p class="tips-title">{{ title }}!</p>
      <p class="tips-msg">
        {{ msg }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
      default: "操作成功",
    },
    msg: {
      type: String,
      required: true,
      default: "",
    },
    src: {
      type: String,
      required: true,
      default: "",
    },
  },
};
</script>

<style lang="less" scoped>
.tips {
  text-align: center;
  // height: calc(428px * var(--ratio));
  background: var(--color-fill-grey-inverse);
  margin-top: calc(72px * var(--ratio));
  .tipsimg {
    height: calc(128px * var(--ratio));
    width: calc(128px * var(--ratio));
    margin: 0 auto;
  }
  .tips-title {
    font-size: var(--font-size-maintitle);
    color: var(--color-text-title);
    margin: calc(48px * var(--ratio)) 0 calc(25px * var(--ratio));
  }
  .tips-msg {
    color: var(--color-text-subtext);
    font-size: var(--font-size-subcontent);
    margin-left: calc(40px * var(--ratio));
    margin-right: calc(40px * var(--ratio));
    padding-bottom: calc(60px * var(--ratio));
  }
}
/deep/p {
  margin: 0;
}
</style>
